<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>淘淘商城</title>
    <link rel="icon" href="../../style/images/logo.png">
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../../style/common.css" />
    <link rel="stylesheet" href="../../element-ui/index.css" />
    <style>
       .el-footer {
            /*background-color: #B3C0D1;*/
            color: #333;
            text-align: center;
            line-height: 20px;
        }
       .el-header{
               /*background-color: #B3C0D1;*/
            color: #333;
            text-align: center;
            height: 100px!important;
            box-shadow: #efeeee 1px 1px 10px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            /*background-color: #E9EEF3;*/
            color: #333;
            text-align: center;
            height: 550px;

            /*line-height: 160px;*/
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        /*.el-container:nth-child(7) .el-aside {*/
        /*    line-height: 320px;*/
        /*}*/
        #main{
            /*background-color: red;*/
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            width: 100%;
            height: 400px;
            background-color: white;
            display: flex;
            justify-content: center;
        }
        .registerForm{
            /*border: 1px solid black;*/
        }
        .Tologin:hover{
            border-bottom: 2px solid #ce1515;
            color: #ce1515 !important;
        }
    </style>
</head>
<body>
    <div id="app" >
        <el-container>
            <el-header>
                <div style="display: flex;align-items: center;justify-content: space-around;width: 100% ">
                    <div style="display: flex;align-items: center;">
                        <a href="../../pages/front/index.html"><img style="width: 50px;height: 50px;" src="../../style/images/logo.png"></a>
                        <a href="../../pages/front/index.html"><img style="width: 50px;height: 50px;" src="../../style/images/tao.png"></a>
                        <a href="../../pages/front/index.html"><img  style="width: 50px;height: 50px;margin-left: -10px" src="../../style/images/tao.png"></a>
                        <h1 style="font-size: 30px;">欢迎注册</h1>

                    </div>
                    <div style="float: right">
                        <p style="font-size: 16px;color: #bbbbbb">
                            已有账号?&nbsp;&nbsp;
                            <a href="login.html"><i class="Tologin" style="color: rgb(226,35,26)">请登录</i></a></p>
                    </div>
                </div>

            </el-header>
            <el-main>
                <div id="main">
                    <div style="width: 300px;height: 560px!important;margin-top: 100px;position: fixed">
                        <template>
                                    <el-form :model="ruleForm" :rules="RegisterRules" ref="ruleForm" >
                                           <el-form-item   prop="username" >
                                               <el-input prefix-icon="el-icon-user-solid" class="registerForm"  v-model="ruleForm.username" placeholder="用户名">
                                               </el-input>
                                           </el-form-item>
                                           <el-form-item  prop="password">
                                               <el-input prefix-icon="el-icon-lock" show-password v-model="ruleForm.password" placeholder="密码">
                                               </el-input>
                                           </el-form-item>
                                        <el-form-item  prop="repassword">
                                               <el-input prefix-icon="el-icon-lock" show-password v-model="ruleForm.repassword" placeholder="确认密码">
                                               </el-input>
                                           </el-form-item>

                                        <el-form-item   prop="phone">
                                            <el-input prefix-icon="el-icon-mobile-phone"  v-model="ruleForm.phone" placeholder="手机号">
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item  prop="code">
                                            <div style="display: flex">
                                                <el-input prefix-icon="el-icon-key"  v-model="ruleForm.code" placeholder="验证码">
                                                    <el-button size="mini" slot="append" :disabled="codeEnable" style="" @click="getCode()" type=""><p style="font-size: 12px">获取验证码</p></el-button>
                                                </el-input>
                                            </div>
                                            <el-form-item>
                                                <el-button type="primary" style="margin-top: 20px" @click.native.prevent="submitForm" >注册</el-button>
                                            </el-form-item>
                                        </el-form-item>

                                    </el-form>
                        </template>
                    </div>
                </div>
            </el-main>
            <el-footer>
                <div>
                    <div
                            style="border-top: 1px solid #e9e9eb;color: #c5c4c4;font-size: 12px">
                        <div class="row footer-content">
                            <div class="terms">
                                <p >
                                    <a href="#">关于我们</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                                    <a href="#">联系我们</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                                    <a href="#">人才招聘</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                                    <a href="#">商家入驻</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                                    <a href="#">广告服务</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                                    <a href="#">手机淘淘</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                                    <a href="#">友情链接</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                                    <a href="#">销售联盟</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                                    <a href="#">淘淘社区</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                                    <a href="#">淘淘公益  </a>
                                </p>
                            </div>
                            <div>
                                <p style="">
                                    Copyright©2004-2023  淘淘 TaoTao.com 版权所有</p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-footer>

        </el-container>
    </div>
    <script src="../../js/vue.js"></script>
    <script src="../../element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../js/axios.min.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    activeName: 'first',
                    codeEnable: false,
                    ruleForm: {
                        username: '',
                        password: '',
                        code: '',
                        phone: '',
                        repassword: '',

                    },
                }
            },
            computed:{
                RegisterRules() {
                    const regex1 = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
                    const validateUsername = (rule, value, callback) => {
                        if (value.length < 1 ) {
                            callback(new Error('请输入用户名'))
                        } else if(value.length > 6){
                            callback(
                                new Error('用户名最多6位字符'))
                            }else {
                            callback()
                        }
                    }
                    const validatePassword = (rule, value, callback) => {
                        if (value.length < 6) {
                            callback(new Error('密码必须在6位以上'))
                        } else {
                            callback()
                        }
                    }
                    const validaterePassword = (rule, value, callback) => {
                        if (value !==this.ruleForm.password) {
                            callback(new Error('两次输入的密码不一致'))
                        } else if(value.length < 1){
                            callback(new Error('请再次确认密码'))
                        } else {
                            callback()
                        }
                    }
                    const validatePhone = (rule, value, callback) => {
                        if (!regex1.test(value)) {
                            callback(new Error('请输入正确的手机号'))
                        } else {
                            callback()
                        }
                    }
                    //
                    // const  validateCode= (rule, value, callback) => {
                    //     if (value.length !== 6) {
                    //         callback(new Error('请输入6位验证码'))
                    //     } else {
                    //         callback()
                    //     }
                    // }

                    return {
                        'username': [{ 'validator': validateUsername, 'trigger': 'blur' }],
                        'password': [{ 'validator': validatePassword, 'trigger': 'blur' }],
                        'repassword': [{ 'validator': validaterePassword, 'trigger': 'blur' }],
                        'phone': [{ 'validator': validatePhone, 'trigger': 'blur' }],
                        // 'code': [{ 'validator': validateCode, 'trigger': 'blur' }]
                    }
                }
            },
            created(){

            },
            mounted(){},
            methods:{
                async getCode(){
                    this.ruleForm.code = ''
                    const regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
                    if (regex.test(this.ruleForm.phone)) {
                        const {data: res} = await axios.post('/user/sendMSG', data = {phone: this.ruleForm.phone})
                        if(res.code == 1){
                            this.$notify({
                                title: '成功',
                                message: '验证码发送成功',
                                type: 'success',
                                duration: 2000
                            })
                        }
                    } else {
                        this.$notify({
                            title: '警告',
                            message: '验证码发送失败',
                            type: 'warning',
                            duration: 2000
                        })
                    }
                }
                ,
                async submitForm() {
                    // this.ruleForm.code = ''
                    this.$refs.ruleForm.validate((valid) => {
                        if (valid ) {
                          this.register()
                        } else {
                            this.$notify({
                                title: '注册失败',
                                message: '格式错误',
                                type: 'warning',
                                duration: 2000
                            })
                        }
                    });
                },
                async register(){
                    data = {
                        username : this.ruleForm.username,
                        password: this.ruleForm.password,
                        code:  this.ruleForm.code,
                        phone:  this.ruleForm.phone,
                    }
                    const {data:res} = await axios.post('/user/register',data)
                    // console.log(res)
                    if(res.code == 1){
                        location.href = '../../pages/front/login.html'
                    }else {
                        this.$notify({
                            title: '注册失败',
                            message: res.msg,
                            type: 'warning',
                            duration: 2000
                        })
                    }
                },
            }
        })
    </script>
</body>
</html>